.user-index{
	background-color: #F4F4F4;
}
.user-header {
		position: relative;
		background: $dominant-color;
		background-image: url(../../../static/app/user/bg.png);
		background-size: cover;
		padding: 40rpx 0 0;
		
	}

	.user-header .user-header-inner {
		position: relative;
		padding: 30rpx 30rpx 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		margin-bottom: 80rpx;
	}

	.user-header .user-header-inner::after,
	.user-header .user-header-inner::before {
		display: block;
		content: '';
		position: absolute;
		border-radius: 50%;
		z-index: 0;
	}

	.user-header .user-header-inner::after {
		width: 400rpx;
		height: 400rpx;
		right: -100rpx;
		bottom: -200rpx;
		background-image: radial-gradient(90deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0));
	}

	.user-header .user-header-inner::before {
		width: 200rpx;
		height: 200rpx;
		left: -60rpx;
		top: -20rpx;
		background-image: radial-gradient(-90deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0));
	}

	.user-header .user-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.user-header .photo,
	.user-header .photo image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.user-header .photo {
		border: 4rpx solid #ffffff;
	}

	.user-header .info {
		padding-left: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		color: #ffffff;
	}

	.user-header .info .name {
		font-weight: bold;
		font-size: 30rpx;
	}

	.user-header .info .tel {
		font-size: 26rpx;
	}
	.info{
		width: 340rpx;
		display: flex;
		flex-direction: row;
		margin-top: -30rpx;
	}
	.crown{
		width: 40rpx;
		height: 40rpx;
		margin-top: -4rpx;
		margin-left: 10rpx;
	}
	.user-header .info .grade {
		display: block;
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 36rpx;
		border-radius: 20rpx;
		background: rgba(0, 0, 0, 0.2);
		color: #ffc670;
	}

	.user-header .sign-box {
		position: absolute;
		right: 20rpx;
		padding: 0 10rpx;
		height: 50rpx;
		border: 1px solid #ffe300;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffe300;
		z-index: 10;
	}

	.user-header .sign-box .iconfont {
		color: #ffe300;
	}
	.tel{
		display: flex;
		flex-direction: row;
	}
	.updateinfo{
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		left: 180rpx;
		margin-top: 30rpx;
	}

	.updateinfo text{
		margin-top: 10rpx;
	}
	.updateinfo image{
		width: 60rpx;
		height: 60rpx;
		margin-top: 0rpx;
	}
	.setting{
		width: 60rpx;
		height: 60rpx;
		margin-top: -100rpx;;
	}
	.user-header{
		.vip-wrap{
			position: absolute;
			height: 140rpx;
			right: 20rpx;
			bottom: -50rpx;
			left: 20rpx;
			background-color: #2b365f;
			color: #af9166;
			border-radius: 15rpx;
			.vip-box{
				height: 90rpx;
				//color: #F5D19CFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				.vip-box-l{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 28rpx;
					
					image{
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
				}
				.vip-box-r{
					font-size: 24rpx;
					border: 1px solid #af9166;
					padding: 5rpx 15rpx;
					border-radius: 20rpx;
				}
				.time{
					display: flex;
					flex-direction: row;
					align-items: center;
					.vip-time{
						font-size: 10rpx;
						margin-right: 10rpx;
					}
					.vip-next{
						font-size: 30rpx;
					}
				}
			}
			.vip-info{
				height: 50rpx;
				background-color: #242c4a;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #af9166;
				font-size: 24rpx;
				//padding-bottom: 10rpx;
				.vip-icon{
					height: 50rpx;
					width: 180rpx;
					background-color:#c5ad89;
					border-top-right-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					image{
						width:114rpx;
						height: 34rpx;
					}
				}
			}
		}
	}
	

	.user-header .my-order {
		position: absolute;
		padding: 0 30rpx;
		/* height: 240rpx; */
		right: 20rpx;
		bottom: -75rpx;
		left: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
		background: #ffffff;
		z-index: 10;
	}

	.my-order .item {
		display: flex;
		padding: 20rpx 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.my-order .icon-box,
	.my-assets .icon-box {
		width: 60rpx;
		height: 60rpx;
	}

	.my-order .icon-box .iconfont,
	.my-assets .icon-box .iconfont {
		font-size: 50rpx;
		color: #333333;
	}

	.my-order .icon-box .dot {
		position: absolute;
		top: 0;
		left: 30rpx;
		height: 25rpx;
		min-width: 25rpx;
		padding: 4rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		background: #f00808;
		color: #ffffff;
	}

	.my-assets {
		margin: 0 20rpx;
		/* margin-top: 105rpx; */
		padding: 30rpx 0;
		background: #ffffff;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		
	}
	.my-assets .item-icon{
		width: 56rpx;
		height: 56rpx;
	}
	.block-wrap{
		margin: 0 20rpx;
		/* margin-top: 105rpx; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		// background: #ffffff;
		// box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
		// border-radius: 16rpx;
		.block-item{
			background: #ffffff;
			box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			height: 140rpx;
			//width: 48%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item-l{
				padding-left: 20rpx;
				font-size: 28rpx;
				font-weight: 600;
				view{
					margin-left: 36rpx;
				}
				text{
					font-size: 24rpx;
					font-weight: 500;
					color: $dominant-color;
				}
			}
			.item-r{
				width: 140rpx;
				height: 140rpx;
			}
		}
	}

	.my-wallet {
		position: relative;
		width: 200rpx;
		border-left: 1px solid #dddddd;
	}

	.my-wallet::after {
		position: absolute;
		display: block;
		content: '';
		left: 0;
		border: 8rpx solid transparent;
		border-left-color: #dddddd;
	}

	.menu-wrap {
		margin: 0 20rpx;
		margin-top: 30rpx;
		background: #ffffff;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	
	.menu-list{
		width: 100%;
		.menu-item{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 20rpx;
			border-bottom: 1px solid #f4f4f4;
			.item-l{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.menu-wrap .group-bd {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.menu-wrap .item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 172rpx;
		height: 150rpx;
		font-size: 24rpx;
	}

	.menu-wrap .item.icon-dizhi1-box .icon-round {
		background-image: linear-gradient(135deg, #67b4e2 10%, #356dce 70%, #5c8fe8 90%);
	}

	.menu-wrap .item.icon-youhuiquan1-box .icon-round {
		background-image: linear-gradient(135deg, #e87ea4 10%, #ff268a 70%, #fe0d76 90%);
	}

	.menu-wrap .item.icon-youhuiquan--box .icon-round {
		background-image: linear-gradient(135deg, #ff5a30 10%, #ff2b3c 70%, #ff1740 90%);
	}

	.menu-wrap .item.icon-fenxiao1-box .icon-round {
		background-image: linear-gradient(135deg, #7ceeba 10%, #1ed2b7 70%, #17c0ad 90%);
	}

	.menu-wrap .item.icon-kanjia-box .icon-round {
		background-image: linear-gradient(135deg, #f2a904 10%, #f27d04 70%, #eaa031 90%);
	}

	.menu-wrap .item.icon-shezhi1-box .icon-round {
		background-image: linear-gradient(135deg, #615f6c 10%, #4c4a58 70%, #615f6c 90%);
	}

	.menu-wrap .icon-round {
		width: 60rpx;
		height: 60rpx;
		background: red;
		border-radius: 50%;
		color: #ffffff;
	}

	.menu-wrap .item .iconfont {
		font-size: 40rpx;
		color: #ffffff;
	}

	.menu-wrap .item .name {
		margin-top: 10rpx;
	}

	.bind_phone {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.bind_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		height: 100%;
		padding: 0 20rpx;
	}

	.bind_txt {}

	.bind_btn {
		width: 134rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		border-radius: 25rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #e2231a;
	}

	.vertical {
		position: absolute;
		top: 10px;
		right: 53px;
		z-index: 100000;
	}

	.vertical_img {
		width: 100rpx;
		height: 100rpx;
	}

	.f20 {
		margin-left: 5rpx;
		font-size: 19rpx;
	}

	.red_mini {
		color: #ff2b3c;
	}

	.icon-zhuanshutequan {
		color: #f5dca6;
		position: relative;
		top: -36rpx;
		left: 220rpx;
	}
	
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
		z-index: 998;
	}

	.bottom-dialog-wrap{
		position: fixed;
		width: 94%;
		margin-left: 3%;
		z-index: 999;
		bottom: 20rpx;
		.info-wrap{
			background-color: #ffffff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			.info-item{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
				font-size: 36rpx;
				color: $dominant-color;
				image{
					width: 60rpx;
					height: 60rpx;
					margin: 20rpx;
				}
			}
			
		}
		.dialog-btn{
			background-color: #ffffff;
			border-radius: 8rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
		}
	}